<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:fragment="handpick">
        <van-search
                v-model="searchText"
                show-action
                label="书名"
                placeholder="请输入搜索关键词"
                shape="round"
        >
            <template #action>
                <div @click="onSearchClick">搜索</div>
            </template>
        </van-search>

        <van-cell title="书荒推荐" center  icon="fire-o" :is-link="true" :clickable="false" @shortageClick="shortageClick()"  >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon >
                <span style="margin-right: 3px"  @click="shortageClick()">换一换</span>
                <van-icon name="replay" class="replay" @click="shortageClick()"/>
            </template>
        </van-cell>

        <div>
            <van-grid :column-num="3" icon-size="90px" :border="false"
                      :clickable="true">
                <van-grid-item
                        v-for="novel in novels.shortage"
                        :key="novel"
                        :icon="novel.image"
                        :text="novel.name"
                        :url="novel.novelUrl"
                />
                <template #text>
<!--                    <div style="height: 10px">-->
                          <span style="text-align:center;color: #646566;font-size: 12px;line-height: 1.5; word-break:break-all;">
                            {{novel.name}}
                          </span>
<!--                    </div>-->
                    <span v-if="novel.name.length<10" style="text-align:center;color: #646566;font-size: 12px;line-height: 1.5; word-break:break-all;">&nbsp;</span>
                </template>
            </van-grid>
        </div>
        <div>
            <notice-bar :notice="notice"></notice-bar>
        </div>
        <van-cell title="站长推荐" icon="good-job-o" :is-link="false" :clickable="false" >
        </van-cell>

        <novel-light
                :novel="novel"
                v-for="novel in novels.recommend"
                @click.native="onNovelClick(event,novel)"
        >
        </novel-light>

        <van-cell title="最近更新" icon="good-job-o" :is-link="false" :clickable="false" >
        </van-cell>

        <novel-light
                :novel="novel"
                v-for="novel in novels.update"
                @click.native="onNovelClick(event,novel)"
        >
        </novel-light>



        <van-popup v-model:show="isSearchPop" position="bottom" :close-on-popstate="true" :closeable="true"
                   :style="{ width: '100%' ,height: '100%', 'background-color':'#f7f8fa' }">
            <van-nav-bar title="搜索"></van-nav-bar>
            <van-search
                    v-model="searchText"
                    show-action
                    label="书名"
                    placeholder="请输入搜索关键词"
                    shape="round"
            >
                <template #action>
                    <div @click="onSearchClick">搜索</div>
                </template>
            </van-search>

            <novel-light
                    :novel="novel"
                    v-for="novel in searchResult"
                    @click.native="onNovelClick(event,novel)"
            >
            </novel-light>
            <van-empty v-if="searchResult == undefined || searchResult.length < 1" description="未找到结果" ></van-empty>

            <van-pagination
                    v-model="searchPageNo"
                    :total-items="searchTotal"
                    :items-per-page="searchPageSize"
                    :show-page-size="3"
                    force-ellipses
                    @change="searchPageChange"
            ></van-pagination>
        </van-popup>


    </div>
</body>
</html>